<template>
	<view class="container">
		<view class="appointment-tabs">
			<view class="tab-item" :class="{ active: currentTab === index }" v-for="(item, index) in tabList"
				:key="index" @click="switchTab(index)">
				<text class="tab-item-tab">
					{{ item.name }}
				</text>
			</view>
		</view>

		<view class="appointment-list">
			<view class="appointment-item" v-for="appointment in filteredAppointments" :key="appointment.id">
				<view class="appointment-header">
					<view class="appointment-status" :class="getStatusClass(appointment.status)">
						{{ getStatusText(appointment.status) }}</view>
					<view class="appointment-date">{{ appointment.date }} {{ appointment.time }}</view>
				</view>
				<view class="appointment-content">
					<image class="doctor-avatar" :src="appointment.doctor.avatar" mode="aspectFill"></image>
					<view class="appointment-info">
						<view class="doctor-name">{{ appointment.doctor.name }}</view>
						<view class="doctor-title">{{ appointment.doctor.title }}</view>
						<view class="doctor-department">{{ appointment.doctor.department }}</view>
						<view class="hospital-name">{{ appointment.hospitalName }}</view>
					</view>
				</view>
				<view class="appointment-actions">
					<view class="action-btn" v-if="appointment.status === 1" @click="cancelAppointment(appointment.id)">
						取消预约</view>
					<view class="action-btn" v-if="appointment.status === 1 || appointment.status === 2"
						@click="viewDetail(appointment.id)">查看详情</view>
					<view class="action-btn" v-if="appointment.status === 3" @click="leaveFeedback(appointment.id)">评价医生
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		DOCTOR_LIST
	} from '@/config.js'
	export default {
		data() {
			return {
				currentTab: 0,
				tabList: [{
						id: 0,
						name: '全部'
					},
					{
						id: 1,
						name: '待就诊'
					},
					{
						id: 2,
						name: '已就诊'
					},
					{
						id: 3,
						name: '已取消'
					}
				],
				appointmentList: [{
						id: 1,
						status: 1, // 1:待就诊, 2:已就诊, 3:已取消
						date: '2025-07-03',
						time: '09:30-10:00',
						hospitalName: '北京市第一医院',
						doctor: DOCTOR_LIST.find(item => item.id === 1)
					},
					{
						id: 2,
						status: 1,
						date: '2025-06-28',
						time: '14:00-14:30',
						hospitalName: '北京市第一医院',
						doctor: DOCTOR_LIST.find(item => item.id === 2)
					},
					{
						id: 3,
						status: 3,
						date: '2025-06-20',
						time: '10:30-11:00',
						hospitalName: '北京市第一医院',
						doctor: DOCTOR_LIST.find(item => item.id === 3)
					},
					{
						id: 4,
						status: 2,
						date: '2025-06-05',
						time: '15:30-16:00',
						hospitalName: '北京市第一医院',
						doctor: DOCTOR_LIST.find(item => item.id === 4)
					}
				]
			}
		},
		computed: {
			filteredAppointments() {
				if (this.currentTab === 0) {
					return this.appointmentList;
				} else {
					return this.appointmentList.filter(appointment => appointment.status === this.currentTab);
				}
			}
		},
		methods: {
			switchTab(index) {
				this.currentTab = index;
			},
			switchNav(index) {
				if (index == 0) {
					uni.navigateTo({
						url: '/pages/index/index'
					})
					return
				}
			},
			getStatusText(status) {
				const statusMap = {
					1: '待就诊',
					2: '已就诊',
					3: '已取消'
				};
				return statusMap[status] || '';
			},
			getStatusClass(status) {
				const classMap = {
					1: 'status-pending',
					2: 'status-completed',
					3: 'status-canceled'
				};
				return classMap[status] || '';
			},
			cancelAppointment(id) {
				uni.showModal({
					title: '取消预约',
					content: '确定要取消该预约吗？',
					success: (res) => {
						if (res.confirm) {
							// 这里可以添加取消预约的逻辑
							console.log('取消预约:', id);
							const appointment = this.appointmentList.find(item => item.id === id);
							if (appointment) {
								appointment.status = 3;
								uni.showToast({
									title: '预约已取消',
									icon: 'success'
								});
							}
						}
					}
				});
			},
			viewDetail(id) {
				// 这里可以跳转到预约详情页
				console.log('查看详情:', id);
				uni.navigateTo({
					url: `/pages/appointmentDetail/appointmentDetail?id=${id}`
				});
			},
			leaveFeedback(id) {
				// 这里可以跳转到评价页面
				console.log('评价医生:', id);
				uni.navigateTo({
					url: `/pages/feedback/feedback?id=${id}`
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
	}

	.appointment-tabs {
		display: flex;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		padding: 15px 0;
	}

	.appointment-tabs .tab-item {
		flex: 1;
		text-align: center;
		font-size: 14px;
	}

	.appointment-tabs .tab-item .tab-item-tab {
		padding-bottom: 10px;
	}

	.appointment-tabs .tab-item.active .tab-item-tab {
		color: #1677ff;
		border-bottom: 2px solid #1677ff;
	}

	.appointment-list {
		padding: 10px;
	}

	.appointment-item {
		background-color: #fff;
		border-radius: 8px;
		margin-bottom: 10px;
		overflow: hidden;
	}

	.appointment-header {
		display: flex;
		justify-content: space-between;
		padding: 10px 15px;
		background-color: #f5f5f5;
	}

	.status-pending {
		color: #ff9900;
	}

	.status-completed {
		color: #52c41a;
	}

	.status-canceled {
		color: #999;
	}

	.appointment-date {
		font-size: 12px;
		color: #666;
	}

	.appointment-content {
		display: flex;
		padding: 15px;
	}

	.doctor-avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-right: 15px;
	}

	.appointment-info {
		flex: 1;
	}

	.doctor-name {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.doctor-title {
		font-size: 12px;
		color: #1677ff;
		margin-bottom: 5px;
	}

	.doctor-department {
		font-size: 12px;
		color: #666;
		margin-bottom: 5px;
	}

	.hospital-name {
		font-size: 12px;
		color: #999;
	}

	.appointment-actions {
		display: flex;
		justify-content: flex-end;
		padding: 10px 15px;
		border-top: 1px solid #eee;
	}

	.action-btn {
		font-size: 12px;
		color: #1677ff;
		padding: 5px 15px;
		border: 1px solid #1677ff;
		border-radius: 5px;
		margin-left: 10px;
	}
</style>